<template>
    <el-row class="my-table">
        <i v-if="showColSelect" class="el-icon-s-grid" @click="controlColumns"></i>
        <!-- <el-button v-if="showColSelect" type="primary" size="mini" @click="controlColumns">列显示隐藏</el-button> -->
        <el-row>
            <!-- height -16是因为容器padding做了调整 -->
            <el-table :key="key" ref="singleTable" border :stripe="stripe" 
            :data="tableData" style="width: 100%;table-layout: fixed;" 
            empty-text="暂无数据" tooltip-effect="light" 
            :row-class-name="tableRowClassName" :show-summary="showsummary" 
            :summary-method="getSummaries" :span-method="arraySpanMethod" 
            :cell-style="cellStyle" :height="height ? height - 16 : null" 
            :show-header="showHeader" :highlight-current-row="current" 
            :row-style="rowStyle" @current-change="handleCurrentChange" 
            @sort-change="onSortChange" @row-click="onRowClick" 
            @row-dblclick="onRowDblClick" @cell-click="onCellClick" 
            @select="handleSelectChange" @select-all="handleSelectAllChange" 
            @selection-change="onSelectionChange" @cell-contextmenu="handleContextMenu" 
            :row-key="getRowKey"  >
                <el-table-column v-if="ifSelect" align="center" :resizable="false" :fixed="noIsFixed" type="selection" width="63" :selectable="selectable"></el-table-column>
                <el-table-column width="40" align="center" v-if="ifCurrentRadio" :fixed="noIsFixed" :resizable="false">
                    <template slot-scope="scope">
                        <el-radio class="tabradio" :label="scope.$index" v-model="templateRadio" @change.native="handleCurrentChange(scope.row)"> </el-radio>
                    </template>
                </el-table-column>
                <el-table-column v-if="ifIndex" :resizable="false" type="index" label="序号" width="60" align="center" :fixed="noIsFixed" :index="currIndex"> </el-table-column>

                <template v-for="column in columns">
                    <el-table-column v-if="column.isShow" :key="column.prop+Math.random()" :prop="column.prop" :show-overflow-tooltip="column.hasOwnProperty('tooltip') ? column.tooltip : true" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :resizable="!column.fixed" :align="getColnumAlign(column)" :label="column.label" :sortable="column.sortable">
                        <template slot-scope="scope">
                            <my-render v-if="column.render" :row="scope.row" :column="scope.column" :render="column.render"></my-render>
                            <span v-else>
                                <span v-if="column.showType == 'num'">{{ $utils.parseToThousandth(scope.row[column.prop]) }}</span>
                                <span v-else-if="column.showType == 'percent'">{{ $utils.formaterNumberToPercentage(scope.row[column.prop], 2) }}</span>
                                <span v-else-if="column.showType == 'date'">{{ $utils.formatDate(scope.row[column.prop], column.dateFormat) }}</span>
                                <span v-else>{{ scope.row[column.prop] }}</span>
                            </span>
                        </template>
                        <template v-if="column.children">
                            <el-table-column v-for="(columnChildren, index) in column.children" :key="index" :prop="columnChildren.prop" show-overflow-tooltip :width="columnChildren.width" :min-width="columnChildren.minWidth" :fixed="columnChildren.fixed" :resizable="!column.fixed" :align="getColnumAlign(columnChildren)" :label="columnChildren.label" :sortable="columnChildren.sortable">
                                <template slot-scope="scope">
                                    <my-render v-if="columnChildren.render" :row="scope.row" :column="scope.column" :render="columnChildren.render"></my-render>
                                    <span v-else>
                                        <span v-if="columnChildren.showType == 'num'">{{ $utils.parseToThousandth(scope.row[columnChildren.prop]) }}</span>
                                        <span v-else-if="columnChildren.showType == 'percent'">{{ $utils.formaterNumberToPercentage(scope.row[columnChildren.prop], 2) }}</span>
                                        <span v-else-if="columnChildren.showType == 'date'">{{ $utils.formatDate(scope.row[columnChildren.prop], columnChildren.dateFormat) }}</span>
                                        <span v-else>{{ scope.row[columnChildren.prop] }}</span>
                                    </span>
                                </template>
                                <template v-if="columnChildren.children">
                                    <el-table-column v-for="(columnChildren1, index1) in columnChildren.children" :key="index1" :prop="columnChildren1.prop" show-overflow-tooltip :width="columnChildren1.width" :min-width="columnChildren1.minWidth" :fixed="columnChildren1.fixed" :resizable="!column.fixed" :align="getColnumAlign(columnChildren1)" :label="columnChildren1.label" :sortable="columnChildren1.sortable">
                                        <template slot-scope="scope">
                                            <my-render v-if="columnChildren1.render" :row="scope.row" :column="scope.column" :render="columnChildren1.render"></my-render>
                                            <span v-else>
                                                <span v-if="columnChildren1.showType == 'num'">{{ $utils.parseToThousandth(scope.row[columnChildren1.prop]) }}</span>
                                                <span v-else-if="columnChildren1.showType == 'percent'">{{ $utils.formaterNumberToPercentage(scope.row[columnChildren1.prop], 2) }}</span>
                                                <span v-else-if="columnChildren1.showType == 'date'">{{ $utils.formatDate(scope.row[columnChildren1.prop], columnChildren1.dateFormat) }}</span>
                                                <span v-else>{{ scope.row[columnChildren1.prop] }}</span>
                                            </span>
                                        </template>

                                        <template v-if="columnChildren1.children">
                                            <el-table-column v-for="(columnChildren2, index2) in columnChildren1.children" :key="index2" :prop="columnChildren2.prop" show-overflow-tooltip :width="columnChildren2.width" :min-width="columnChildren2.minWidth" :fixed="columnChildren2.fixed" :resizable="!column.fixed" :align="getColnumAlign(columnChildren2)" :label="columnChildren2.label" :sortable="columnChildren2.sortable">
                                                <template slot-scope="scope">
                                                    <my-render v-if="columnChildren2.render" :row="scope.row" :column="scope.column" :render="columnChildren2.render"></my-render>
                                                    <span v-else>
                                                        <span v-if="columnChildren2.showType == 'num'">{{ $utils.parseToThousandth(scope.row[columnChildren2.prop]) }}</span>
                                                        <span v-else-if="columnChildren2.showType == 'percent'">{{ $utils.formaterNumberToPercentage(scope.row[columnChildren2.prop], 2) }}</span>
                                                        <span v-else-if="columnChildren2.showType == 'date'">{{ $utils.formatDate(scope.row[columnChildren2.prop], columnChildren2.dateFormat) }}</span>
                                                        <span v-else>{{ scope.row[columnChildren2.prop] }}</span>
                                                    </span>
                                                </template>
                                            </el-table-column>
                                        </template>
                                    </el-table-column>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </el-row>
        <el-pagination v-if="isShowPage" background :current-page="pageNum" :page-size="pageSize" :page-sizes="pageSizes" :total="totalPage" :pager-count="7" layout="total, sizes, prev, pager, next, jumper" @current-change="onCurrentChange" @size-change="onPageSizeChange"></el-pagination>
        <colnum-is-show :params="colParams" @colChange="colChange"></colnum-is-show>
    </el-row>
</template>

<script>
import ColnumIsShow from './ColumnIsShow.vue'; //列显示隐藏控制
/*
 * @Description 封装
 * tableData 表格数据
 * columns 表格参数
 * showsummary 合计开关
 * showTotal 是否显示总计
 * tableHj 显示合计总计的JSON数据
 * arraySpanMethod 合并单元格
 * getSummaries 合计函数
 * pageNum 分页
 * pageSize 每页大小
 * totalPage 总页数
 */
export default {
    components: { ColnumIsShow },
    props: {
        selectdisabled: { type: Boolean, default: false },//多选框是否禁用，用于查看时
        mxzbxzdx: { type: Boolean, default: false },
        getRowKeys: String,
        stripe: { type: Boolean, default: false },
        tableData: { type: Array, required: true }, // 表格数据
        tableHj: {
            type: Object,
            required: false,
            default: () => { }
        },
        columns: { type: Array, required: true }, // 表格参数
        showsummary: {
            type: Boolean,
            require: false,
            default: true
        }, // 合计开关
        arraySpanMethod: {
            type: Function,
            required: false,
            default: () => { }
        }, // 合并单元格
        cellStyle: {
            type: Function,
            required: false,
            default: () => { }
        }, // 单元格的 style 的回调方法
        rowStyle: {
            type: Function,
            required: false,
            default: () => { }
        }, // 表格行的 style 的回调方法
        openRightClickMenu: { type: Boolean, default: false }, // 是否开启右键菜单
        height: { type: Number, required: false }, // 表格高度
        current: { type: Boolean, default: true }, // 是否可选中表格
        ifCurrentRadio: { type: Boolean, default: false }, //是否选择单选样式
        showHeader: { type: Boolean, default: true }, // 默认显示表头
        selectedCurrent: { type: Number, default: 0 }, // 默认选中第几行
        pageNum: { type: Number, default: 1 }, // 分页
        pageSizes: { type: Array, default: () => [20, 50, 80, 100, 200, 500] },
        pageSize: { type: Number, default: 20 }, // 每页大小
        totalPage: { type: Number, default: -1 }, // 总页数
        ifSelect: { type: Boolean, default: false },
        ifIndex: { type: Boolean, default: true }, //第一列是否显示序号，默认第一列显示序号
        showTotal: { type: Boolean, default: false }, // 是否显示总计
        noIsFixed: { type: Boolean, default: true }, // 序号是否固定在左侧 默认固定
        showColSelect: { type: Boolean, default: false }, //是否显示配置列显示隐藏弹框
        isShowPage: { type: Boolean, default: true } //是否显示分页
    },
    data() {
        return {
            list: [], // 表格,
            colParams: {
                columns: [],
                visible: false
            },
            key: 1000,
            templateRadio: ''
        };
    },
    watch: {
        
        tableData(newvaleu) {
            // 弹窗展示数据
            setTimeout(() => {
                this.$refs.singleTable.doLayout();
            }, 200);
            this.list = newvaleu;
            if (!this.ifSelect) {
                // 只有current属性时，点击会有高亮效果，默认选中第一条，有current和ifSelect属性时,点击有高亮，默认不选中第一条
                if (this.selectedCurrent) {
                    // 默认选中第几条
                    this.$refs.singleTable.setCurrentRow(this.list[this.selectedCurrent - 1]);
                }
            }
        },
        selectedCurrent(value) {
            if (value) {
                this.$refs.singleTable.setCurrentRow(this.tableData[value - 1]);
            }
        }
    },
    created() {
        this.columns.forEach((el, index) => {
            const prop = this.columns[index].prop ? this.columns[index].prop : this.columns[index].label + 'xxx';
            this.$set(this.columns, index, { ...this.columns[index], prop, isShow: true });
        });
        //初始化给显示隐藏列的数组传值
        const array = [];
        this.columns.forEach(el => {
            const { label, prop } = el;
            array.push({
                label,
                prop,
                isShow: true
            });
        });
        this.colParams.columns = array;
    },
    methods: {
        // 处理列的居中，如果为内置的格式化属性，直接按照规定居中或者靠右显示
        getColnumAlign(colnum) {
            if (colnum.showType) {
                if (colnum.showType == 'date') {
                    return 'center';
                } else {
                    return 'right';
                }
            } else {
                return colnum.align || 'left';
            }
        },
        /**
         * 显示、隐藏 列的 change
         */
        colChange(data) {
            //列改变
            data.forEach(el => {
                const index = this.columns.findIndex(item => item.prop == el.prop);
                if (index >= 0) {
                    this.$set(this.columns, index, { ...this.columns[index], isShow: el.isShow });
                }
            });
            this.key = Math.random();
        },
        tableRowClassName({ row, rowIndex }) {
            row.index = rowIndex;
        },
        // 当前 页码 发生变化
        onCurrentChange(val) {
            this.$emit('onCurrentChange', val);
        },
        // 分页大小 发生变化
        onPageSizeChange(val) {
            this.$emit('onPageSizeChange', val);
        },
        // 选中表格
        handleCurrentChange(val) {
            if (this.ifCurrentRadio && val) {
                this.templateRadio = val.index;
            }
            this.$emit('onRowSelectedChange', val);
        },
        // 排序
        onSortChange(val) {
            this.$emit('onSortChange', val);
        },
        // 单机某一行
        onRowClick(val) {
            this.$emit('onRowClick', val);
        },
        // 单机某一单元格
        onCellClick(row, column, cell, event) {
            this.$emit('onCellClick', row, column, cell, event);
        },
        // 双击某一行
        onRowDblClick(val) {
            this.$emit('onRowDblClick', val);
        },
        //当选择项发生变化时会触发该事件
        onSelectionChange(val) {
            this.$emit('onSelectionChange', val);
        },
        //当用户手动勾选数据行的 Checkbox 时触发的事件
        handleSelectChange(selection, row) {
            this.$emit('onSelect', selection, row);
        },
        //当用户手动勾选全选 Checkbox 时触发的事件
        handleSelectAllChange(selection) {
            this.$emit('onSelectAll', selection);
        },
        getSummaries(params) {
            var start = 0;
            var arr = [];
            if (this.showTotal) {
                arr[start] = (
                    <div style="margin:0 -10px;">
                        <p style="margin:0;padding:0;border-bottom: 1px solid #e0e0e0">本页合计</p>
                        <p style="margin:0;padding:0;border-bottom: 1px solid #e0e0e0">总计</p>
                    </div>
                );
                if (this.ifSelect) {
                    start += 1;
                    arr[start] = '';
                }
            } else {
                arr[start] = '合计';
                if (this.ifSelect) {
                    start += 1;
                    arr[start] = '';
                }
            }
            let index = start;
            this.columns.forEach(val => {
                const { isShow } = val;
                if (val.children) {
                    val.children.forEach(item => {
                        if (item.children) {
                            item.children.forEach(item1 => {
                                if (item1.children) {
                                    item1.children.forEach(item2 => {
                                        if (item2.children) {
                                            item2.children.forEach(item3 => {
                                                if (!(this.showColSelect && !isShow)) {
                                                    index++;
                                                    if (item3.isSummaries) {
                                                        if (this.tableHj) {
                                                            if (this.showTotal) {
                                                                arr[index] = (
                                                                    <div style="margin:0 -10px;">
                                                                        <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                                            {this.$utils.parseToThousandth(
                                                                                this.tableHj[item3.Summaries],
                                                                                false,
                                                                                this.checkNum(item3.decimalPlaces) ? item3.decimalPlaces : 2
                                                                            )}
                                                                            &nbsp;
                                                                        </p>
                                                                        <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                                            {this.$utils.parseToThousandth(
                                                                                this.tableHj['zj_' + item3.Summaries + '_zj'],
                                                                                false,
                                                                                this.checkNum(item3.decimalPlaces) ? item3.decimalPlaces : 2
                                                                            )}
                                                                            &nbsp;
                                                                        </p>
                                                                    </div>
                                                                );
                                                            } else {
                                                                arr[index] = this.$utils.parseToThousandth(
                                                                    this.tableHj[item3.Summaries],
                                                                    false,
                                                                    this.checkNum(item3.decimalPlaces) ? item3.decimalPlaces : 2
                                                                );
                                                            }
                                                        } else {
                                                            let sum = 0;
                                                            if (this.tableData) {
                                                                this.tableData.map(function (itemD) {
                                                                    sum += Number(itemD[item3.Summaries]);
                                                                });
                                                            }
                                                            arr[index] = this.$utils.parseToThousandth(sum);
                                                        }
                                                    }
                                                }
                                            });
                                        } else {
                                            if (!(this.showColSelect && !isShow)) {
                                                index++;
                                                if (item2.isSummaries) {
                                                    if (this.tableHj) {
                                                        if (this.showTotal) {
                                                            arr[index] = (
                                                                <div style="margin:0 -10px;">
                                                                    <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                                        {this.$utils.parseToThousandth(
                                                                            this.tableHj[item2.Summaries],
                                                                            false,
                                                                            this.checkNum(item2.decimalPlaces) ? item2.decimalPlaces : 2
                                                                        )}
                                                                        &nbsp;
                                                                    </p>
                                                                    <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                                        {this.$utils.parseToThousandth(
                                                                            this.tableHj['zj_' + item2.Summaries + '_zj'],
                                                                            false,
                                                                            this.checkNum(item2.decimalPlaces) ? item2.decimalPlaces : 2
                                                                        )}
                                                                        &nbsp;
                                                                    </p>
                                                                </div>
                                                            );
                                                        } else {
                                                            arr[index] = this.$utils.parseToThousandth(
                                                                this.tableHj[item2.Summaries],
                                                                false,
                                                                this.checkNum(item2.decimalPlaces) ? item2.decimalPlaces : 2
                                                            );
                                                        }
                                                    } else {
                                                        let sum = 0;
                                                        if (this.tableData) {
                                                            this.tableData.map(function (itemC) {
                                                                sum += Number(itemC[item2.Summaries]);
                                                            });
                                                        }
                                                        arr[index] = this.$utils.parseToThousandth(sum);
                                                    }
                                                }
                                            }
                                        }
                                    });
                                } else {
                                    if (!(this.showColSelect && !isShow)) {
                                        index++;
                                        if (item1.isSummaries) {
                                            if (this.tableHj) {
                                                if (this.showTotal) {
                                                    arr[index] = (
                                                        <div style="margin:0 -10px;">
                                                            <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                                {this.$utils.parseToThousandth(this.tableHj[item1.Summaries], false, this.checkNum(item1.decimalPlaces) ? item1.decimalPlaces : 2)}
                                                                &nbsp;
                                                            </p>
                                                            <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                                {this.$utils.parseToThousandth(
                                                                    this.tableHj['zj_' + item1.Summaries + '_zj'],
                                                                    false,
                                                                    this.checkNum(item1.decimalPlaces) ? item1.decimalPlaces : 2
                                                                )}
                                                                &nbsp;
                                                            </p>
                                                        </div>
                                                    );
                                                } else {
                                                    arr[index] = this.$utils.parseToThousandth(this.tableHj[item1.Summaries], false, this.checkNum(item1.decimalPlaces) ? item1.decimalPlaces : 2);
                                                }
                                            } else {
                                                let sum = 0;
                                                if (this.tableData) {
                                                    this.tableData.map(function (itemB) {
                                                        sum += Number(itemB[item1.Summaries]);
                                                    });
                                                }
                                                arr[index] = this.$utils.parseToThousandth(sum);
                                            }
                                        }
                                    }
                                }
                            });
                        } else {
                            if (!(this.showColSelect && !isShow)) {
                                index++;
                                if (item.isSummaries) {
                                    if (this.tableHj) {
                                        if (this.showTotal) {
                                            arr[index] = (
                                                <div style="margin:0 -10px;">
                                                    <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                        {this.$utils.parseToThousandth(this.tableHj[item.Summaries], false, this.checkNum(item.decimalPlaces) ? item.decimalPlaces : 2)}
                                                        &nbsp;
                                                    </p>
                                                    <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                        {this.$utils.parseToThousandth(this.tableHj['zj_' + item.Summaries + '_zj'], false, this.checkNum(item.decimalPlaces) ? item.decimalPlaces : 2)}
                                                        &nbsp;
                                                    </p>
                                                </div>
                                            );
                                        } else {
                                            arr[index] = this.$utils.parseToThousandth(this.tableHj[item.Summaries], false, this.checkNum(item.decimalPlaces) ? item.decimalPlaces : 2);
                                        }
                                    } else {
                                        let sum = 0;
                                        if (this.tableData) {
                                            this.tableData.map(function (itemA) {
                                                sum += Number(itemA[item.Summaries]);
                                            });
                                        }
                                        arr[index] = this.$utils.parseToThousandth(sum);
                                    }
                                }
                            }
                        }
                    });
                } else {
                    if (!(this.showColSelect && !isShow)) {
                        index++;
                        if (val.isSummaries) {
                            if (this.tableHj) {
                                if (this.showTotal) {
                                    arr[index] = (
                                        <div style="margin:0 -10px;">
                                            <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                {this.$utils.parseToThousandth(this.tableHj[val.Summaries], false, this.checkNum(val.decimalPlaces) ? val.decimalPlaces : 2)}
                                                &nbsp;
                                            </p>
                                            <p style="margin:0;padding:0 10px;border-bottom: 1px solid #e0e0e0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                                {this.$utils.parseToThousandth(this.tableHj['zj_' + val.Summaries + '_zj'], false, this.checkNum(val.decimalPlaces) ? val.decimalPlaces : 2)}
                                                &nbsp;
                                            </p>
                                        </div>
                                    );
                                } else {
                                    arr[index] = this.$utils.parseToThousandth(this.tableHj[val.Summaries], false, this.checkNum(val.decimalPlaces) ? val.decimalPlaces : 2);
                                }
                            } else {
                                let sum = 0;
                                if (this.tableData) {
                                    this.tableData.map(function (item) {
                                        sum += Number(item[val.Summaries]);
                                    });
                                }
                                arr[index] = this.$utils.parseToThousandth(sum);
                            }
                        }
                    }
                }
            });
            return arr;
        },
        checkNum(num) {
            if (num == 0) {
                return true;
            } else {
                return num;
            }
        },
        // 点击当前行，并选中当前行的checkbox
        toggleRowSelection(row) {
            this.$refs.singleTable.toggleRowSelection(row);
        },
        tableDoLyout() {
            this.$refs.singleTable.doLayout();
        },
        /**
         * @method index
         * @description 计算表格中序号
         * @param {number } index 当前序号
         * @return {number} 当前序号
         * @example
         */
        currIndex(index) {
            return (this.pageNum - 1) * this.pageSize + index + 1;
        },
        setCurrentRow(row) {
            if (row) {
                this.$refs.singleTable.setCurrentRow(row);
            }
        },
        selectable(row, index) {
           
            if (row.notCheck === '1' || (row.checkState && row.checkState != 3 || this.selectdisabled) || (this.mxzbxzdx && row.modelState != 2) ) {
                return false;
            } else {
                return true;
            }
        },
        //打开列控制弹窗
        controlColumns() {
            this.colParams.visible = true;
        },
        handleContextMenu(row, column, element, event) {
            if (this.openRightClickMenu) {
                // 阻止默认的右键菜单
                event.preventDefault();
                // 抛出右键事件
                this.$emit('onRightClick', { row, column, event });
            }
        },
        //新增的一些方法
        getRowKey(row) {
            return row.id
        },
        istoggleRowSelection(row) {//回显复选框选中
            this.tableData.forEach(val => {
                row.forEach(item => {
                    if (val.id === item.id) {
                        console.log('//回显复选框选中', val);
                        this.$refs.singleTable.toggleRowSelection(val, true);
                    }
                })
            })
        },
        isradio(val) {//单选，父级调用传入复选数组
            if (val.length > 1) {
                this.$refs.singleTable.clearSelection();
                this.$refs.singleTable.toggleRowSelection(val.pop());
            }
        },
        isclearSelection() {
            this.$refs.singleTable.clearSelection()
        },
    }
};
</script>
<style lang="scss" scoped>
.my-table {
    position: relative;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    .el-icon-s-grid {
        position: absolute;
        cursor: pointer;
        font-size: 22px;
        right: 8px;
        top: -28px;
    }
    .el-table th {
        background: #f5f5f5;
        font-size: 14px;
        font-weight: 500;
        font-family: PingFangSC-Semibold, PingFang SC;
    }
    .el-pagination {
        text-align: right;
        padding: 8px 16px 8px 0;
        background: #fff;
        .el-input__icon,
        .el-pagination__total,
        .el-pagination__jump,
        .el-pagination__sizes,
        .el-input__inner,
        .btn-prev,
        .btn-next,
        .el-pagination__editor {
            height: 23px;
            line-height: 23px;
        }
        .el-pagination__editor {
            width: 36px;
        }
    }
    .cell {
        line-height: 20px;
    }
    .el-pager li {
        height: 23px;
        line-height: 23px;
    }
}
</style>
